<template>
  <div style="height: 100%;width: 100%;overflow: hidden">
    <div style="height: 100%;width: 100%;padding-top: 3rem;overflow: hidden">
        <goods-coupon-header ></goods-coupon-header>
        <goods-filters :num = "totalCount"></goods-filters>
        <div style="height:100%;overflow: hidden;">
          <vertical-scroll @scrollBottom="loadMore" ref="verticalScroll">
            <goods-infor></goods-infor>
            <goods-coupon-list v-if="GoodsList.length" ref="couponList" :GoodsList="GoodsList"> </goods-coupon-list>
            <div v-show="noMore && serchData && !isShowLoadMore" class="noMore">好东西都看完了</div>
             <div class="no_data" v-show="!serchData">
                <img src="static/image/no_order.png" style="width:70%;">
                暂无相关数据
             </div>
             <div v-if="isShowLoadMore"
                style="position: absolute; bottom:2rem; color:#444444 ;height:2rem!important;  width: 100%;text-align: center;  line-height: 2rem;vertical-align: middle ;"
                @click.self="changeFloat">
              <LoadMoreAnimate></LoadMoreAnimate>
              正在加载...
            </div>  
          </vertical-scroll>     
        </div>  
      <add-cart-animate></add-cart-animate>
    </div>
  </div>
</template>

<script>
  import GoodsCouponHeader from './GoodsCouponHeader';
  import GoodsFilters from './GoodsFilters';
  import goodsInfor from './goodsInfor';
  import GoodsCouponList from './GoodsCouponList';
  import { queryCouponList} from '@/utils/ReturnAxios'
  import VerticalScroll from "@/real-components/VerticalScroll"
  import {mapState, mapGetters, mapMutations} from 'vuex'
  import LoadMoreAnimate from '@/real-components/LoadMoreAnimate'
  import {showLoading, hideLoading} from '@/utils/loading';
  import AddCartAnimate from "../../real-components/AddCartAnimate";
  export default {
    data() {
      return {
          GoodsList:[],
          pageNum: 1,
          pageSize: 6,
          totalCount: 0,
          totalPageCount: 0,
          isShowLoadMore: false,
          noMore:false,
          serchData:true,
      };
    },
    components: {
      GoodsCouponHeader,
      GoodsCouponList,
      GoodsFilters,
      goodsInfor,
      VerticalScroll,
      LoadMoreAnimate,
      AddCartAnimate
    },
    methods: {
      ...mapMutations('cjy',['CHANGE_COUPONS_CONFIG']),
      animateLodding() {
        showLoading();
        setTimeout(() => {
          hideLoading();
        }, 3000)
      },
      // 商品信息
      async  getGoodsData(from) {
       var params = {
            promCode:this.$route.query.promCode
          }
        if(from != 'loadingMore') {
          //当数据为空的时候第一次申请数据
          console.log('111111')
          this.animateLodding()
          let config = {
              pageNum: this.pageNum,
              length: 6,
              ...params,
              ...this.$store.state.cjy.couponsConfig
          }
          console.log(config,'config1111')
          var res = await queryCouponList(config)
          this.noMore = false
          hideLoading();
          this.GoodsList = res.data.data[0].results
          this.totalCount = res.data.data[0].totalCount
          this.totalPageCount = res.data.data[0].totalPageCount;
          // this.pageNum++;
          if(from == 'search') {
            this.serchData = this.GoodsList.length ? true : false
          }
          console.log(this.serchData,'this.serchData===')
        } else {
          console.log('222222')
          this.noMore = false
          this.isShowLoadMore = true;
          this.serchData = true
          let config = {
              pageNum: this.pageNum,
              length: 6,
              ...this.$store.state.cjy.couponsConfig,
              ...params
          } 
          console.log(config,'config22222')
          var res = await queryCouponList(config)
          this.isShowLoadMore = false;
          hideLoading();
          this.GoodsList = this.GoodsList.concat(res.data.data[0].results);
          this.totalPageCount = res.data.data[0].totalPageCount;
          // this.pageNum++;
        }
        console.log(this.GoodsList,'GoodsList')
      },
      //刷新页面
			refresh() {
				this.$nextTick(() => {
					this.$refs.verticalScroll && this.$refs.verticalScroll.refresh();
				});
			},
      //下拉加载数据
      loadMore(){
        if((this.pageNum  < this.totalPageCount)  && this.isShowLoadMore == false){
            this.pageNum++
            this.noMore = false
            this.serchData = true
            this.isShowLoadMore = true;
            this.getGoodsData('loadingMore')
        } else if (this.pageNum >= this.totalPageCount) {
          this.noMore = true
        }
      },
    },
    created() {
      // 初始化商品信息
      this.getGoodsData('created');
      console.log('优惠页面路由',this.$route.query)
    },
    computed: {
      getfilterData(){
        return this.$store.state.cjy.couponsConfig;
      }
    },
     watch:{
      getfilterData(){
        this.pageNum=1
        this.getGoodsData('search');
        console.log(this.$refs.verticalScroll.isTop,'筛选了数据')
        if(!this.$refs.verticalScroll.isTop){
          console.log(this.$refs.verticalScroll,'this.$refs.verticalScroll')
          this.$refs.verticalScroll.goTop();
        }
      }
    },
    async beforeRouteLeave(toRoute, fromRoute, next) {
		  this.$store.state.cjy.couponsConfig = {
        isPutTimeSort: 2
      }
			next()
		}
  };
</script>

<style scoped>
*{
  -webkit-overflow-scrolling: touch;
}
 .infor {
   text-align: center;
   line-height: 1rem;
   padding: 0.6rem 0
 }
 .infor .red {
   color: #f00;
 }
 .infor .black {
   color: #333;
 }
 .noMore {
   /* position: absolute;
   bottom: 0; */
   text-align: center;
   width: 100%;
   height: 3.2rem;
   z-index: 9999;
   margin-top: -0.8rem

 }
</style>
